<template>
  <div>
    <el-form ref="form" size="small" :rules="rules" :model="dialogForm" label-width="80px">
        <!-- 所属学科需要动态展示 -->
      <el-form-item label="所属学科" prop="subjectID" v-if="!$route.query.id">
        <el-select
          v-model="dialogForm.subjectID"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option v-for="item in subjectNameList" :key="item.value" :label="item.label" :value="item.value">{{item.label}}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签名称" style="margin-top: 20px" prop="tagName">
        <el-input
          v-model="dialogForm.tagName"
          placeholder="请输入标签名称"
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-top:40px; text-align: right;">
        <el-button size="medium" @click="cancel">取消</el-button>
        <el-button size="medium" type="primary" @click="submit">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 导入获取学科名称的api
import { simple } from '@/api/hmmm/subjects.js'
// 导入api接口
import { add, detail, update } from '@/api/hmmm/tags.js'
export default {
  name: 'TagsAdd',
  props: {
    //   父组件传递的编辑状态
    isEdit: {
      type: Boolean,
      required: true
    },
    // 父组件传递的被点击的标签数据
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      // 表单数据
      dialogForm: {
        subjectID: '', // 学科ID
        tagName: '' // 标签名称
      },
      //  验证规则
      rules: {
        subjectID: [{ required: true, message: '请选择所属学科', trigger: 'blur' }],
        tagName: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
      },
      subjectNameList: [] // 学科名称
    }
  },
  created () {
    // 获取学科名称
    this.getSubjectName()
    // 获取标签详情
    // this.getTags()
  },
  methods: {
    // 点击取消按钮
    cancel () {
      this.$emit('close')
    },

    // 点击添加的确认按钮
    async add () {
      // 判断是否是跳转的页面
      if (this.$route.query.id) {
        await add({ subjectID: Number(this.$route.query.id), tagName: this.dialogForm.tagName })
      } else {
        await add(this.dialogForm)
      }
      this.$message.success('添加成功')
      this.$emit('addclose')
    },

    // 点击修改的确定按钮
    async edit () {
      // 判断是否是跳转的页面
      if (this.$route.query.id) {
        await update({ id: this.$route.query.id, ...this.dialogForm })
      } else {
        await update({ id: this.row.id, ...this.dialogForm })
      }
      this.$message.success('修改成功')
      this.$emit('close')
    },

    // 点击确认按钮
    submit () {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        // 根据编辑状态 选择点击的按钮状态
        this.isEdit ? this.edit() : this.add()
      })
    },

    // 获取标签详情
    async getTags () {
      // 如果是编辑状态,获取标签详情
      if (this.isEdit) {
        const res = await detail(this.row)
        this.dialogForm = res.data
        // 根据当前被点击的学科id 从 获取的学科列表数据中 查找是否存在该学科,若不存在该学科将该学科id 值置为空
        const arr = this.subjectNameList.filter(v => v.value === this.row.subjectID)
        if (arr.length === 0) {
          this.dialogForm.subjectID = ''
        }
      }
    },

    // 获取学科名称列表
    async  getSubjectName () {
      const res = await simple()
      this.subjectNameList = res.data
      this.getTags()
    }
  }
}
</script>

<style scoped lang='less'>
</style>
